<template>
  <div class="common-tree-transfer">
    <div class="table-box">
      <slot name="leftTitle"></slot>
      <el-scrollbar>
        <el-tree
          @check="addItems"
          :node-key="rowKey"
          v-bind="$attrs.treeProps"
          v-on="$attrs.treeEvents"
          show-checkbox
          :props="treeParams"
          ref="commonTree"
        >
          <template v-slot="{ node, data }">
            <slot name="renderTree" :node="node" :data="data"></slot>
          </template>
        </el-tree>
      </el-scrollbar>
    </div>
    <div class="table-box" :style="{ 'border-right': 'none' }">
      <slot name="rightTitle">
        <div class="notice flex">
          <div style="margin-left: 4px; margin-bottom: 5px">
            已选项 {{ value.length || 0 }}
          </div>
          <el-button
            type="text"
            style="padding: 0; margin-right: 5px"
            @click="removeItems(value)"
            >清空</el-button
          >
        </div>
      </slot>
      <slot name="rightTop"> </slot>
      <el-scrollbar>
        <el-row>
          <div class="flex-content" v-for="item in value" :key="item[rowKey]">
            <slot name="rightContent" :item="item"></slot>
            <div>{{ item[treeParams.label] }}</div>
            <i class="el-icon-close icon" @click="removeItems(item)"></i>
          </div>
        </el-row>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
let { unionBy, map } = require("lodash");
export default {
  name: "transfer",
  props: {
    treeParams: {
      type: Object,
      default() {
        return {
          children: "children",
          label: "label",
        };
      },
    },
    value: {
      type: Array,
    },
    rowKey: {
      type: String,
      default: "id",
    },
  },
  watch: {
    value: {
      handler(val) {
        if (!val || !val.length) return;
        setTimeout(() => {
          this.$refs.commonTree.setCheckedKeys(this.getRowKeyArr(val));
        });
      },
      immediate: true,
    },
  },
  data() {
    return {
      selectionIds: [],
      removeSelection: [],
    };
  },
  methods: {
    getRowKeyArr(val) {
      const data = val.filter((item) => !item.noDelete);
      console.log(data);
      return map(data, this.rowKey);
    },
    getRowKey(item) {
      if (typeof this.rowKey == "string") return item[this.rowKey];
    },
    addItems(items, params) {
      const { checkedNodes, checkedKeys } = params;

      const seletedChildren = checkedNodes.filter(
        (val) => !val.children || !val.children.length
      );
      console.log(
        [...this.value, ...seletedChildren].filter((one) =>
          checkedKeys.includes(one[this.rowKey])
        )
      );
      const allSelectedArr = unionBy(
        [...this.value, ...seletedChildren].filter((one) =>
          checkedKeys.includes(one[this.rowKey])
        ),
        this.rowKey
      );
      this.value.splice(0, this.value.length, ...allSelectedArr);
    },
    removeItems(items) {
      // 变更选中状态
      items[this.rowKey]
        ? this.$refs.commonTree.setChecked(items, false)
        : this.$refs.commonTree.setCheckedKeys([]);

      let removeIds = [];
      Object.prototype.toString.call(items).slice(8, -1) == "Array"
        ? (removeIds = this.getRowKeyArr(items))
        : (removeIds = [this.getRowKey(items)]);

      this.newValue = this.value.filter(
        (item) => !removeIds.includes(this.getRowKey(item))
      );
      this.value.splice(0, this.value.length, ...this.newValue);

      this.selectionIds = this.selectionIds.filter(
        (id) => !removeIds.includes(id)
      );
    },
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.common-tree-transfer {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  height: 100%;
}
.table-box {
  border-right: 1px solid #ddd;
  padding: 16px;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.table-box .el-scrollbar {
  flex: 1;
}
.table-box .el-scrollba ::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.table {
  margin-top: 13px;
}
.icon {
  font-size: 20px;
  color: #999;
  cursor: pointer;
}
.notice {
  font-size: 14px;
  color: #4d4d4d;
  display: flex;
  align-items: center;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4d4d4d;
  font-size: 15px;
  padding: 8px;
}
.flex-content :hover {
  background: #eff0f1 !important;
}
.label-box {
  width: 125px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
}
</style>
